<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>File API</title>
        <style type="text/css">
            label {
                width : 200px;
            }
        </style>
        <script>
            var $id = function(id) { return document.getElementById(id); }
            var $class = function(c, n) { n=n||0; return document.getElementsByClassName(c)[n]; }
            var $classes = function(c)  { return document.getElementsByClassName(c); }
            
            window.onload = function()
            {
                // read ボタンを押した際に実行する関数を登録
                $id("read-button").addEventListener("change", onChangeFile, false);
                // ドロップ時イベントを登録
                $id("ta").addEventListener("dragover", onCancel, false);
                $id("ta").addEventListener("dragenter", onCancel, false);
                $id("ta").addEventListener("drop", onDropFile, false);
            };
            
            // ファイル変更時イベント
            var onChangeFile = function(e)
            {
                // File オブジェクトを取得
                var file = e.target.files[0];
                // ファイル読み込み
                readFile(file);
            };
            
            // ファイルドロップ時イベント
            var onDropFile = function(e)
            {
                e.preventDefault();
                // File オブジェクトを取得
                var file = e.dataTransfer.files[0];
                // ファイル読み込み
                readFile(file);
            };
            
            // デフォル処理をキャンセル
            var onCancel = function(e)
            {
                if(e.preventDefault) { e.preventDefault(); }
                return false;
            };
            
            // ファイル読み込み
            var readFile = function(file)
            {
                var func_name = $id("func-name").value;    // 関数名を取得
                var encode_type = $id("encode-type").value;// エンコードタイプを取得
                if (encode_type=="default") encode_type = "utf-8";
                
                // ファイルの情報を表示
                $id("file-name").innerHTML = file.name; // ファイル名
                $id("file-size").innerHTML = file.size; // ファイルサイズ
                $id("file-type").innerHTML = file.type; // ファイルタイプ
                
                // 中身を読み込む
                var reader = new FileReader();                  // ファイルリーダー生成
                // ロード関数登録
                reader.onload = function(e) {
                    // 読み込んだファイルの中身をテキストエリアにセット
                    $id("ta").value = e.target.result;
                };
                
                // テキストとしてファイルを読み込む
                // reader.readAsText(file);
                // セレクトフォームで選択している関数名でファイル読み込み
                reader[func_name](file, encode_type);
            };
            
        </script>
    </head>
    <body>
        <h1>File API</h1>
        
        <p>Name : <span id="file-name">????</span></p>
        <p>Size : <span id="file-size">????</span></p>
        <p>Type : <span id="file-type">????</span></p>
        <p>Value : </p>
        <textarea id="ta" cols=64 rows=16></textarea>
        <br />
        
        <hr />
        
        <label>
            Func Name : 
            <select id="func-name">
                <option value="readAsText">readAsText</option>
                <option value="readAsDataURL">readAsDataURL</option>
                <option value="readAsArrayBuffer">readAsArrayBuffer</option>
                <option value="readAsBinaryString">readAsBinaryString</option>
            </select>
        </label>
        <br />
        
        <label>
            Encode Type : 
            <select id="encode-type">
                <option value="default">default</option>
                <option value="utf-8">utf-8</option>
                <option value="shift-jis">shift-jis</option>
            </select>
        </label>
        <br />
        
        <input id="read-button" type="file" />
    </body>
</html>



